<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        .bar {
            width: 32px;
            margin: 10px 5px 0 10px;
            text-align: center;
            cursor: pointer;
            /* margin: 5px 5px 0 5px; */
        }


        .orderTitle {
            height: 30px;
            width: 100%;
            background-color: #FAFAFA;
            color: grey;
            line-height: 30px;
        }

        .orderBody {
            height: 150px;
            width: 99.8%;
            /* background-color: #eeeeee; */
            border: 1px solid #e2e2e2;
            border-top: none;
        }

        #mimg {
            width: 120px;
            margin: 15px;
        }

        li {
            width: 80px;
            text-align: center;
            cursor: pointer;
        }

        .cardTitle {
            height: 40px;
            line-height: 40px;
            color: rgb(75, 145, 225);
            border-left: 5px solid rgb(75, 145, 225);
            margin: 15px 0;
            padding-left: 10px;
        }

        .receiveInfo {
            width: 1200px;
            height: 150px;
        }

        .detail {
            width: 1200px;
            height: 350px;
        }
    </style>
</head>

<body>
    <div class="layuimini-container" style="height: 900px;">
        <ul class="layui-tab-title">
            <li class="layui-this">订单信息</li>
            <li>付款信息</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show" style="padding: 15px;">
                <div style="margin-bottom: 10px;">
                    <img src="../images/order.png" alt="" style="vertical-align: middle;width: 28px;">
                    <h3 style="display: inline-block;vertical-align: middle;font-weight: bold;margin: 0 30px 0 5px;">已付款
                    </h3>
                    <div class="layui-progress layui-progress-big" lay-showPercent="true"
                        style="display: inline-block;vertical-align: middle;width:180px"">
                        <div class=" layui-progress-bar" lay-percent="100%"></div>
                </div>

                <div class="receiveInfo">
                    <p class="cardTitle">收货信息</p>
                    <script type="text/html" id="toolbarDemo">
                        <div class="layui-btn-container">
                            <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加
                            </button>
                        </div>
                    </script>

                    <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
                </div>
                <div class="detail">
                    <p class="cardTitle">货物详情</p>
                    <div style="padding: 10px;border: 1px solid #eeeeee;">
                        <div class="layuimini-container">
                            <div class="layuimini-main">
                                <table class="layui-hide" id="currentTableId2" lay-filter="currentTableFilter2"></table>
                            </div>
                        </div>
                        <div class="addition" style="margin-top: 10px;">
                            <img src="../images/防冻液.png" alt="" style="vertical-align: middle;">
                            <span style="display: inline-block;vertical-align: middle;">防冻剂</span>
                            <span style="margin-left: 30px;display: inline-block;vertical-align: middle;">¥10.00</span>
                            <div style="margin-left: 50px;display: inline-block;vertical-align: middle;">
                                <span style="outline: none;margin:0 5px;width: 50px;text-align: center;">1支</span>
                            </div>
                        </div>
                        <div class="layui-form layuimini-form" style="margin-top: 20px;">
                            <div class="layui-input-block">
                                <p style="margin-left: -100px;color: grey;">最晚送达时间：<span id='time'>2022-02-04
                                        18:30:02</span></p>
                            </div>

                        </div>
                        <div
                            style="width: 100%;height:1px;border-top: 1px solid #eeeeee;margin-bottom: 10px;color: grey;">
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <div class="layui-input-block">
                                <p style="margin-left: -100px;border: none;color: grey;">无</p>
                            </div>
                        </div>
                        <div style="width: 100%;height:1px;border-top: 1px dashed #eeeeee;margin-bottom: 10px;"></div>
                        <div style="margin-left: 820px;height: 150px;width: 350px;text-align: right;">
                            <p>已选1种商品，共<span id="Unit">2吨</span>，总商品金额：<span id="Price"
                                    style="margin-left: 20px;">¥8062.00</span>
                            </p>
                            <p>运费：<span style="margin-left: 20px;">¥0.00</span></p>
                            <p>合计：<span id="totalPrice" style="margin-left: 20px;">¥8062.00</span></p>
                            <button type="button" class="layui-btn layui-btn-primary"
                                style="border-radius: 5px;width: 110px;background-color:rgb(75, 145, 225);color: white;margin-top: 20px;"
                                id="submit">查看磅单</button>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>

    </div>

    <script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="../js/lay-config.js?v=2.0.0" charset="utf-8"></script>
    <style type="text/css">
        .layui-table-cell {
            height: auto !important;
            white-space: normal;
        }
    </style>
    <script type="text/html" id="Tpl">
        <div>
            <img src="{{d.mimg}}" alt="" style="margin-right: 25px;width: 100px;">
            <span style="line-height: 150px;">{{d.mname}}</span>
        </div>
    </script>
    <script>
        layui.use(['form', 'table', 'laypage'], function () {
            var $ = layui.jquery,
                form = layui.form,
                table = layui.table,
                laypage = layui.laypage;
            var remember = 0; //是否记住密码
            var password = '';
            var username = '';
            var strCookie = document.cookie;
            var list = [];
            if (strCookie != '') {
                var arrCookie = strCookie.split("; ");
                for (i = 0; i < arrCookie.length; i++) {
                    var arr = arrCookie[i].split("=");
                    if (arr[0] == 'username')
                        username = arr[1];
                    else if (arr[0] == 'remember')
                        remember = 1;
                    else if (arr[0] == 'password')
                        password = arr[1];
                }
            }
            var url = window.location.href;
            var mid = url.split('=')[1];
            $('#submit').on('click', function () {
                var options = {
                    href: 'myPoundList.html',
                    title: '我的磅单'
                };
                parent.layui.miniTab.openNewTabByIframe(options);
            })
            $('body').ready(function () {
                if (mid == '12') {
                    $('#time').text('2022-02-04 18:30:02');
                    $('#Unit').text('2吨');
                    $('#Price').text('¥8062.00');
                    $('#totalPrice').text('¥8062.00');
                } else {
                    $('#time').text('2022-02-04 22:00:30');
                    $('#Unit').text('1桶');
                    $('#Price').text('¥40.00');
                    $('#totalPrice').text('¥40.00');
                    $('.addition').css('display', 'none');
                }
                table.render({
                    elem: '#currentTableId',
                    defaultToolbar: [],
                    url: '/workplace',
                    method: 'get',
                    parseData: function (res) { //res 即为原始返回的数据
                        return {
                            "code": res.code, //解析接口状态
                            "count": res.count, //解析表格数据总条数 eg:共100页              
                            "data": res.data //解析table表格数据源
                        };
                    },
                    where: {
                        "username": username,
                        "workplace": '旭辉运河悦章',
                        "mode": '8',
                    }, //where用来传递请求时额外的参数 eg:productName
                    cols: [
                        [{
                                field: 'siteDetail',
                                width: 400,
                                align: "left",
                            },
                            {
                                field: 'workername',
                                width: 200,
                                align: "left",
                                templet: '<div>{{d.workername}} {{d.workerphone}}</div>',
                            },
                            {
                                minWidth: 100,
                                toolbar: '#currentTableBar',
                                align: "center"
                            }
                        ]
                    ],
                    skin: 'line'
                });

            })
            table.render({
                elem: '#currentTableId2',
                url: '/cart',
                method: 'get',
                parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": res.code, //解析接口状态
                        "count": res.count, //解析表格数据总条数 eg:共100页              
                        "data": res.data //解析table表格数据源
                    };
                },
                where: {
                    "username": username,
                    "mid": mid,
                    "mode2": '4'
                }, //where用来传递请求时额外的参数 eg:productName
                cols: [
                    [{
                            field: 'mname',
                            width: 400,
                            title: '货物名称',
                            style: 'height:160px;line-height:160px',
                            templet: '#Tpl'
                        },
                        {
                            field: 'mtype',
                            width: 250,
                            title: '型号',
                            align: "center",
                            sort: true
                        },
                        {
                            field: 'mprice',
                            width: 250,
                            title: '单价',
                            align: "center",
                            sort: true,
                            templet: '<div><span id="p">¥{{d.mprice}}</span></div>'
                        },
                        {
                            field: 'number',
                            title: '数量',
                            minWidth: 150,
                            align: "center",
                            sort: true,
                            templet: '<div>{{d.number}}{{d.unit}}</div>'
                        }
                    ]
                ],
                skin: 'line'
            });
        });
    </script>

</body>

</html>